<template>
<div style="display:inline-block">
  <Divider plain orientation="left">个人模板</Divider>
  <Tooltip :content="item.label"  v-for="(item, i) in  iTemplateList" :key="i + '-bai1-button'" placement="top">
    <img class="tmpl-img" :alt="item.label" :src="item.src" @click="getTempData(item.tempUrl)">
  </Tooltip>
  <Divider plain orientation="left">推荐模板</Divider>
   <Tooltip :content="item.label"  v-for="(item, i) in  rTemplateList" :key="i + '-bai1-button'" placement="top">
     <img class="tmpl-img" :alt="item.label" :src="item.src" @click="getTempData(item.tempUrl)">
  </Tooltip>
  <!-- <Divider plain orientation="left">形状模板</Divider> -->
</div>
</template>

<script>
import select from '@/mixins/select'
import { downFontByJSON } from '@/utils/utils'
export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      jsonFile: null,
      rTemplateList: [],
      iTemplateList: [],
    };
  },
  mounted() {
    this.initRList()
    this.initIList()
  },
  methods:{
    // 插入文件
    // insertSvgFile(){
    //   // this.$Spin.show({
    //   //     render: (h) => {
    //   //         return h('div','正在加载字体，您耐心等候...')
    //   //     }
    //   // });
    //   downFontByJSON(this.jsonFile).then(() => {
    //     this.$Spin.hide();
    //     this.canvas.c.loadFromJSON(this.jsonFile, this.canvas.c.renderAll.bind(this.canvas.c));
    //   }).catch((e) => {
    //     this.$Spin.hide();
    //     this.$Message.error('字体失败，请重试')
    //   })
    // },
    initIList(){
      if(this.$store.state.token === ""){
        return
      }
      this.$http.post(
          'api/posterEditor/getITemplate/',
          {
            token : this.$store.state.token,
          }
      ).then( res => {
        console.log(res)
        for(var item of res.data){
          this.iTemplateList.push({
            id:item.pk,
            label:`${item.fields.i_template_name}`,
            src:'api/'+item.fields.i_template_png_src,
            tempUrl:'api/'+item.fields.i_template_src,
          })
        }
      })
    },
    initRList() {
      this.$http.post(
          'api/posterEditor/getRTemplate/',
          {},
      ).then( res => {
        for(var item of res.data){
          this.rTemplateList.push({
            id:item.pk,
            name:`${item.fields.r_template_name}`,
            src:'api/'+item.fields.r_template_png_src,
            tempUrl:'api/'+item.fields.r_template_src,
          })
        }
        console.log(this.templateList)
      })
    },
    // 获取模板数据
    getTempData(tmplUrl){
      this.$Spin.show({
          render: (h) => {
              return h('div','加载数据中...')
          }
      });
      const getTemp = this.$http.get(tmplUrl)
      getTemp.then(res => {
        this.jsonFile = JSON.stringify(res.data)
        downFontByJSON(this.jsonFile).then(() => {
          this.$Spin.hide();
          this.canvas.c.loadFromJSON(this.jsonFile, this.canvas.c.renderAll.bind(this.canvas.c));
        }).catch((e) => {
          this.$Spin.hide();
          this.$Message.error('加载失败，请重试')
        })
      })
    }
  }
};
</script>

<style scoped lang="less">
.tmpl-img{
  width: 77px;
  cursor: pointer;
  margin-right: 5px;
}
</style>
